<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>day13</title>
    <style>
        body {
            background-color: #2A3950;
            margin: 0;
        }

        .box1 {
            background-color: #2A3950;
            width: 100%;
            height: 140px;
        }

        .box2 {
            position: relative;
            top: -100px;
            left: 0;
            background-color: #FF9201;
            width: 80%;
            height: 150px;
            margin: 0 auto;
            border-radius: 6px;
        }

        .box3 {
            position: relative;
            top: -230px;
            left: 10px;
            background-color: #F04A4D;
            width: 80%;
            height: 150px;
            margin: 0 auto;
            border-radius: 6px;
        }

        .box4 {
            background-color: #258BD6;
            width: 80%;
            height: 150px;
            margin: 10px auto;
            margin-top: -300px;
            border-radius: 6px;
        }
        .tag {
            color: white;
            padding: 10px 20px;
            font-weight: bold;
            text-shadow: 3px 4px 3px gray;
        }
        .card-num {
            color: white;
            text-shadow: 2px 2px 2px gray;
            padding: 30px;
            letter-spacing: 2px;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2">
        <p class="tag">VIP年卡</p>
    </div>
    <div class="box3">
        <p class="tag">VIP终身卡</p>
    </div>
    <div class="box4">
        <p class="tag">VIP月卡</p>
        <p class="card-num">8888 6666 4444 2222</p>
    </div>
</body>

</html>